<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       html,body{
        width:100%;
        height: 100%;
        }
    .shadow{
        width:100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position:fixed;
        left: 0;
        top:0;
        display: none;
    }
    .box{
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
        width: 300px;
        height: 300px;
        background: white;
    }
    .box input,.box button{
        margin-top: 20px;
        margin-left: 60px;
    }
    </style>
    <script src="axios.min.js"></script>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
       function getProducts(){
         axios.get("/get_product").then(function(result){
             data=result.data.data.result
             updatetable(data)
         })
       }
       function updatetable(data){
           var product_body=document.getElementById("product_body")
           var html=""
           data.forEach(item => {
               html +=`
               <tr align="center" product_id=${item._id}>
                <td>${item.goods_name}</td>
                <td>${item.price}</td>
                <td>${item.number}</td>
                <td>${item.dw}</td>
                <td><span class="delete" onclick="del_product('${item._id}')">删除</span></td>
                <td><span class="revise">修改</span></td>
                </tr>
               `
           });
           product_body.innerHTML=html
           $(".revise").on("click",revise_product)
           
       }
       function del_product(_id){
          axios.post("/del_product",{_id:_id}).then(function(result){
             if(result.data.status==10000){
                 location.reload(true)
             }
          })
       }
       function add_product(){
        var name = document.getElementById('name').value;
        var price = document.getElementById('price').value;
        var count = document.getElementById('count').value;
        var unit = document.getElementById('unit').value;
        axios.post("/add_product",{goods_name:name,price:price,number:count,dw:unit}).then(function(result){
            if(result.data.status==10000){
                location.reload(true)
            }
        })
       }
        var product_id
       function revise_product(){
           console.log($(this).parent().parent().attr("product_id"))
        var shadow=document.getElementsByClassName("shadow")[0]
        var name = document.getElementById('rev_name');
        var price = document.getElementById('rev_price');
        var count = document.getElementById('rev_count');
        var unit = document.getElementById('rev_unit');
          $(shadow).css("display","block")
          name.value=$(this).parent().parent().children()[0].innerText
          price.value=$(this).parent().parent().children()[1].innerText
          count.value=$(this).parent().parent().children()[2].innerText
          unit.value=$(this).parent().parent().children()[3].innerText
          product_id=$(this).parent().parent().attr("product_id")
       } 
       function save_product(){
        var name = document.getElementById('rev_name');
        var price = document.getElementById('rev_price');
        var count = document.getElementById('rev_count');
        var unit = document.getElementById('rev_unit');
        var data={
            _id:product_id,
            goods_name:name.value,
            price:price.value,
            number:count.value,
            dw:unit.value
            }
          axios.post("/revise_product",data).then(function(result){
            $(".shadow").css("display","none")
            if(result.data.status==10000){
                location.reload(true)
            }
          })
       }
       function cancel_product(){
        $(".shadow").css("display","none")
       }
       window.onload=function (){
          getProducts()
       }
    </script>
</head>
<body>
    <table id="product_table" border="1" width="400" height="200" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>产品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>单位</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody id="product_body">
        </tbody>
    </table>
    <hr/>

    <div>
        <input id="name" type="text">
        <input id="price" type="number">
        <input id="count" type="number">
        <input id="unit" type="text">
        <button onclick="add_product()">新增</button>
    </div>
    <div class="shadow">
        <div class="box">
            <p>
                <input id="rev_name" type="text">
            </p>
            <p>
                <input id="rev_price" type="number">
            </p>
            <p>
                <input id="rev_count" type="number">
            </p>
            <p>
                <input id="rev_unit" type="text">
            </p>
            <p>
                <button onclick="save_product()">保存</button>
                <button onclick="cancel_product()">取消</button>
            </p>
        </div>
    </div>
</body>
</html>
